<template>
  <el-row :gutter="10" style="height: 100%">
    <el-col :span="1">
      <div style="width: 5px;height: 100%;background-color: #22ccee;float: right"></div>
    </el-col>
    <el-col :span="23">
      <p style="font-weight: bold;float: left">新增排班</p>
    </el-col>
  </el-row>
  <el-row style="text-align: left;margin: 0 auto 0 100px;">
    <el-col :span="5">
      <el-button style="color: deepskyblue;border-color: deepskyblue;margin-right: 18px"
                 plain @click="dialogForm = true">新增人员
      </el-button>
      <el-dialog v-model="dialogForm" title="新增人员" width="400" align-center center>
        <el-form-item label="医生姓名" label-width="80px">
          <el-select v-model="schedule.doctorId" placeholder="请选择"
                     @change="handleSelectChange(schedule.doctorId)">
            <el-option v-for="d in doctors" :value="d.id" :label="d.nickname"/>
          </el-select>
        </el-form-item>
        <el-form-item label="所在科室" label-width="80px">
          <el-select v-model="doctor.departmentName" placeholder=" " disabled/>
        </el-form-item>
        <el-form-item label="职位" label-width="80px">
          <el-select v-model="doctor.duties" placeholder=" " disabled/>
        </el-form-item>
        <el-form-item label="排班时间" label-width="80px">
          <el-row>
            <el-col :span="9">
              <el-select v-model="schedule.createDate" placeholder="请选日期">
                <el-option v-for="d in dates_of_duty_shift" :value="d"/>
              </el-select>
            </el-col>
            &nbsp;-&nbsp;
            <el-col :span="9">
              <el-select v-model="schedule.dutyShift" placeholder="请选班次">
                <el-option v-for="d in dutyShift" :value="d"/>
              </el-select>
            </el-col>
          </el-row>
        </el-form-item>
        <template #footer>
          <el-button style="color: white;background-color: deepskyblue;margin-right: 18px;width: 100px" @click="save()">
            保 &nbsp; &nbsp; 存
          </el-button>
        </template>
      </el-dialog>
      <el-button style="color: deepskyblue;border-color: deepskyblue;margin-right: 18px"
                 @click="router.push('/admin/schedule')">返回
      </el-button>
    </el-col>
    <el-col :span="10"></el-col>
    <el-col :span="1">
      <div style="background-color: forestgreen;width: 12px;height: 12px"></div>
      <span style="width:28px ;height: 16px">上午</span>
    </el-col>
    <el-col :span="1">
      <div style="background-color: sandybrown;width: 12px;height: 12px"></div>
      <span style="width:28px ;height: 16px">下午</span>
    </el-col>
    <el-col :span="4">
      <el-button style="color: deepskyblue;margin-right: 10px">上周</el-button>
      <el-button style="color: white;background-color: deepskyblue;margin-right: 10px">本周</el-button>
      <el-button style="color: deepskyblue;margin-right: 10px">下周</el-button>
    </el-col>
    <el-col :span="2">
      <el-icon style="margin-right: 10px;margin-top: 15px">
        <Refresh/>
      </el-icon>
    </el-col>
  </el-row>
  <el-card style="height: 50px;line-height:10px;background-color: #ECECEC;margin-top: 20px">
    <el-row style="text-align: left">
      <el-col :span="4">医护人员</el-col>
      <el-col :span="3">星期日({{ dates_of_week[0] }})</el-col>
      <el-col :span="3">星期一({{ dates_of_week[1] }})</el-col>
      <el-col :span="3">星期二({{ dates_of_week[2] }})</el-col>
      <el-col :span="3">星期三({{ dates_of_week[3] }})</el-col>
      <el-col :span="3">星期四({{ dates_of_week[4] }})</el-col>
      <el-col :span="3">星期五({{ dates_of_week[5] }})</el-col>
      <el-col :span="2">星期六({{ dates_of_week[6] }})</el-col>
    </el-row>
  </el-card>
  <el-card style="height: 110px;width: 1605px;margin-top: 10px" v-for="s in schedules">
    <el-row style="text-align: left">
      <el-col :span="3">
        <el-row>
          <el-col :span="7">
            <img :src="BASE_URL+s.imgUrl" style="width: 50px;height: 66px" alt="医生头像"/>
          </el-col>
          <el-col :span="5">
            <div style="width: 70px;height: 30px;line-height: 30px;font-weight: bold">{{s.doctorName}}</div>
            <div style="width: 100px;height: 45px;line-height: 45px">{{s.departmentName}}</div>
          </el-col>
          <el-col :span="12">
            <el-tag style="color: white;width: 100px;height: 35px;background-color: deepskyblue;margin-left: 40px">
              {{s.duties}}
            </el-tag>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="3" v-for="d in s.schedule">
        <el-row>
          <el-col :span="7"/>
          <el-col :span="1">
            <div class="upSeparator" v-if="d.dutyShift==='早班'"/>
            <div class="centerSeparator" v-if="d.dutyShift==='中班'"/>
            <div class="downSeparator" v-if="d.dutyShift==='晚班'"/>
          </el-col>
          <el-col :span="16">
            <div class="upTime" v-if="d.dutyShift==='早班'">{{ d.dutyShift }} 06:00-14:00</div>
            <div class="centerTime" v-if="d.dutyShift==='中班'">{{ d.dutyShift}} 14:00-22:00</div>
            <div class="downTime" v-if="d.dutyShift==='晚班'">{{ d.dutyShift}} 22:00-06:00</div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </el-card>
  <div class="divPagination">
    <el-pagination
        v-model:current-page="currentPage"
        layout="prev, pager, next, jumper"
        :total="total"
        @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup>
import {Refresh} from "@element-plus/icons-vue";
import router from "@/router";
import {onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
import qs from "qs";

const dialogForm = ref(false);
const schedule = ref({});
const doctors = ref([]);
const doctor = ref({});
const schedules = ref([]);
const dutyShift = ['早班', '中班', '晚班'];

// 获取今天是星期几，星期天为0，星期六为6
let today = new Date().getDay();
// 创建一个新的日期对象
let monday = new Date();
// 计算星期一的日期
monday.setDate(monday.getDate() - today + 1);
// 定义一个数组用于存储这个星期的日期
let dates_of_week = [];
let dates_of_duty_shift = [];

for (let i = 0; i < 14; i++) {
  // 创建一个新的日期对象
  let date = new Date(monday.getTime());
  // 计算当前日期
  date.setDate(date.getDate() + i - 1);
  // 将当前日期添加到数组中
  const month = String(date.getMonth() + 1).padStart(2, "0");
  const day = String(date.getDate()).padStart(2, "0");
  if (i < 7) {
    dates_of_week.push(`${month}-${day}`);
  }
  if (date.getDay() + i > today) {
    dates_of_duty_shift.push(`${month}-${day}`);
  }
}

const userToken = ref(localStorage.getItem("user-token") ?
    JSON.parse(localStorage.getItem("user-token")) : null);

onMounted(()=>{
  if (userToken.value == null) {
    alert("请先登录!");
    router.push("/patient/login");
    return;
  }
  axios.defaults.headers.common['Authorization']=userToken.value;

  getSchedule(currentPage.value)

  axios.get(BASE_URL+"/v1/doctors/type").then((response)=>{
    if (response.data.code===20000){
      doctors.value = response.data.data;
    }else ElMessage.error(response.data.message)
  })
})

const getSchedule = (pageNum)=>{
  axios.post(BASE_URL+"/v1/schedules/select/pageNum="+pageNum,dates_of_week).then((response)=>{
    if (response.data.code===20000){
      schedules.value = response.data.data.list;
      total.value = response.data.data.maxPage;
    }else ElMessage.error(response.data.message)
  })
}

const save = () => {
  if (schedule.value.doctorId==null){
    ElMessage.error('请选择需要增加排班的医生!')
    return;
  }
  if (schedule.value.createDate==null){
    ElMessage.error('请选择增加排班的排班日期!')
    return;
  }
  if (schedule.value.dutyShift==null){
    ElMessage.error('请选择增加排班的排班班次!')
    return;
  }
  const date = new Date(schedule.value.createDate);
  const year = new Date().getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, "0");
  const day = String(date.getDate()).padStart(2, "0");
  schedule.value.createDate = `${year}-${month}-${day} 00:00:00`;

  let data = qs.stringify(schedule.value);
  axios.post(BASE_URL+'/v1/schedules/add',data).then((response)=>{
    if (response.data.code === 20000){
      ElMessage.success("新增排班成功!")
      location.reload();
    }else {
      ElMessage.error(response.data.message)
    }
  })
  dialogForm.value = false;
}

const handleSelectChange = (doctorId) => {
  axios.get(BASE_URL+"/v1/doctors/select/"+doctorId).then((response)=>{
    if (response.data.code ===20000){
      doctor.value = response.data.data;
    }else ElMessage.error(response.data.message);
  })
}

const handleCurrentChange = (val) => {
  currentPage.value = val;
  getSchedule(val);
}
const currentPage = ref(1)
const total = ref()
</script>

<style scoped>
.divPagination {
  margin-left: 1300px;
  margin-top: 20px
}

.upTime {
  color: #3EC46C;
  background-color: aliceblue;
  width: 130px;
  height: 30px;
  line-height: 30px;
}

.centerTime {
  color: #409EFF;
  background-color: honeydew;
  width: 130px;
  height: 30px;
  margin-top: 20px;
  line-height: 30px;
}

.downTime {
  color: #D5803C;
  background-color: lightgoldenrodyellow;
  width: 130px;
  height: 30px;
  margin-top: 40px;
  line-height: 30px;
}

.upSeparator {
  background-color: #3DC46BFE;
  width: 4px;
  height: 30px
}

.centerSeparator{
  background-color: #409EFF;
  width: 4px;
  height: 30px;
  margin-top: 20px;
}

.downSeparator {
  background-color: #D5803C;
  width: 4px;
  height: 30px;
  margin-top: 40px
}
</style>